<div #inputNumber class="x-input-number">
  <div class="x-input-number-row">
    <ng-template #beforeButtonTpl>
      <x-button
        class="x-input-number-reduce"
        icon="fto-minus"
        [size]="size"
        [onlyIcon]="!bordered"
        [disabled]="disabled || minDisabled"
        (click)="!minDisabled && plus($event, step, false)"
        (mousedown)="!minDisabled && down($event, step, false)"
        (mouseup)="up($event)"
      ></x-button>
    </ng-template>
    <x-input
      #inputEleRef
      class="x-input-number-input"
      [label]="label"
      [labelWidth]="labelWidth"
      [labelAlign]="labelAlign"
      [justify]="justify"
      [align]="align"
      [direction]="direction"
      [disabled]="disabled"
      [required]="required"
      [icon]="icon"
      [iconSpin]="iconSpin"
      [placeholder]="placeholder"
      [readonly]="readonly"
      [clearable]="clearable"
      [(ngModel)]="displayValue"
      (ngModelChange)="change($event)"
      [valueTpl]="valueTpl"
      [valueTplContext]="valueTplContext"
      [size]="size"
      [bordered]="bordered"
      [before]="beforeButtonTpl"
      [after]="afterButtonTpl"
      [pattern]="pattern"
      [message]="message"
    ></x-input>
    <ng-template #afterButtonTpl>
      <x-button
        class="x-input-number-plus"
        icon="fto-plus"
        [size]="size"
        [onlyIcon]="!bordered"
        [disabled]="disabled || maxDisabled"
        (click)="!maxDisabled && plus($event, step)"
        (mousedown)="!maxDisabled && down($event, step)"
        (mouseup)="up($event)"
      ></x-button>
    </ng-template>
    <ng-container *ngIf="invalid">
      <div class="x-border-error x-top-left"></div>
      <div class="x-border-error x-top-right"></div>
      <div class="x-border-error x-bottom-left"></div>
      <div class="x-border-error x-bottom-right"></div>
    </ng-container>
  </div>
</div>
